<template>
  <div class="contractDraftDetail">
    <div class="aaa">
      <div class="ccui-navigation">
        <el-button
          size="mini"
          type="primary-icon-medium"
          icon="icon-ccui-return"
          @click="handleBack"
          >返回
        </el-button>
        <div class="ccui-navigation-divider" />
        <!-- 面包屑 -->
        <el-breadcrumb
          class="ccui-navigation-crumbs-container"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item
            :to="{ path: $store.getters.getBreadcrumb('level1').path }"
            >{{ $store.getters.getBreadcrumb("level1").name }}
          </el-breadcrumb-item>
          <el-breadcrumb-item
            :to="{ path: '/paymentManagement/paymentapproval/pendingapproval' }"
            >付款管理
          </el-breadcrumb-item>
          <el-breadcrumb-item
            :to="{
              path: '/paymentManagement/paymentapproval/approvalall'
            }"
            >付款审批
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span>审批</span>
            <span class="ccui-curr-crumb ccui-ml-10" v-if="businessList">
              {{ businessList.orderName }}
            </span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <!-- <contractDraftDetail></contractDraftDetail>
    <approvalOperate></approvalOperate> -->
    <div style="display: flex">
      <div style="flex: 1">
        <component :is="currentComponent"></component>
      </div>

      <!-- <div>
         <approval-read-record 
          :approvalRecordData="activities"
          ></approval-read-record>
      </div>
      -->
    </div>
    <!-- <contractDraftDetail /> -->

    <approvalOperate />
    <!--    <export-qr ref="exportQr"></export-qr>-->
    <div class="detail-info-el-Label">
      <el-label :type="approvings" v-if="approvingStatus"></el-label>
    </div>
  </div>
</template>

<script>
import contractDraftDetail from "../paymentApplication/applicationDetail";
import contractDraftDetail1 from "../paymentApplicationChange/applicationChangeDetail";
// import approvalReadRecord from "../components/approval-read-record.vue";
import approvalOperate from "@/basa/components/public/approval/approval-operate";
// import exportQr from "@/basa/components/public/exportQr";
// import {
//   getRecord
// } from "./api/template-request";
export default {
  components: {
    contractDraftDetail,
    approvalOperate,
    contractDraftDetail1
    // approvalReadRecord
  },
  data() {
    return {
      businessList: {},
      currentComponent: "contractDraftDetail",
      activities: [],
      approvings: "", // 审批状态
      approvingStatus: true // 审批状态展示
      // approvingType: {
      //   '0': "pending", //待审批
      //   '1': "approving", // 审批中
      //   '3': "approvaled", // 审批通过
      //   '4': "sendback", // 已退回
      //   '2': "withdrawn" // 已撤回
      // },
    };
  },
  activated() {
    // this.getRecordDetail()
    let data = this.$store.getters.businessList;
    console.log(data);
    const { workItemStatus } = data;
    if (workItemStatus == 0) {
      this.approvings = "approving";
    }
    //       switch (workItemStatus) {
    //   case 0:
    //     this.approvings = "approving";
    //     break;
    //   case 3:
    //     this.approvings = "approvaled";
    //     break;
    //   case 4:
    //     this.approvings = "sendback";
    //     break;
    //   case 2:
    //     this.approvings = "withdrawn";
    //     break;
    // }
  },
  mounted() {
    this.getRecordDetail();
    this.businessList = JSON.parse(sessionStorage.getItem("businessData"));
    let type = this.$route.query.businessBillTypeCode;
    if (type == "S0601") {
      this.currentComponent = "contractDraftDetail";
    } else {
      this.currentComponent = "contractDraftDetail1";
    }
    // console.log('businessList',businessList)
  },
  methods: {
    handleBack() {
      this.$router.push(
        // sessionStorage.getItem("fromPath") ||
        "/paymentManagement/paymentapproval/pendingapproval"
      );
    },
    getRecordDetail() {
      let data = this.$store.getters.businessList;
      console.log(data);
      const {
        // businessBillId,
        // businessBillTypeCode,
        // businessCode,
        // businessAppId,
        // agentId,
        workItemStatus
      } = data;
      console.log(workItemStatus);
      //     switch (workItemStatus) {
      //   case 0:
      //     this.approvings = "approving";
      //     break;
      //   case 3:
      //     this.approvings = "approvaled";
      //     break;
      //   case 4:
      //     this.approvings = "sendback";
      //     break;
      //   case 2:
      //     this.approvings = "withdrawn";
      //     break;
      // }
      // let typedata = {
      //   businessBillId:businessBillId,
      //   businessCode:businessCode,
      //   businessBillType:businessBillTypeCode,
      //   businessAppId:businessAppId,
      //   agentId:agentId
      // }
      // getRecord(typedata).then(res =>{
      //   this.activities = res.data.data.recordList
      // this.approving = this.approvingType[workItemStatus];

      //   console.log('审批记录',res)
      // })
    }
  }
};
</script>

<style lang="scss">
.contractDraftDetail {
  // display: flex;
  position: relative;
  .ccui-navigation {
    display: none;
  }
  .el-bottom-guide {
    display: none;
  }
}
.aaa {
  .ccui-navigation {
    display: block;
  }
}
.detail-info-el-Label {
  position: absolute;
  width: 107px;
  right: 33px;
  top: 31px;
  z-index: 1;
}
 .approval-read-record{
   width: 380px;
   float: left;
   margin-left: 18px;
   background: #fff;
   margin-top: 15px;
 }
</style>
